import ParticipatedActivityList from './ParticipatedActivityList';
import CollectionActivity from './CollectionActivity';
import BrowsingActivity from './BrowsingActivity';
import AttentionPress from './AttentionPress';
import AttentionPerson from './AttentionPerson';
import CollectionColumn from './CollectionColumn'
import {getImageUrl} from '@/utils/utils.js'
import {TypeBox} from '@/views/home/components/index.jsx'
import styled from 'styled-components'
import CollectionAudio from '@/views/personalCenter/components/CollectionAudio.jsx'
import CollectionEssay from '@/views/personalCenter/components/CollectionEssay.jsx'
import CollectionNewspaperMagazine from '@/views/personalCenter/components/CollectionNewspaperMagazine.jsx'
import CollectionCultural from '@/views/personalCenter/components/CollectionCultural.jsx'
import CollectionDatabase from '@/views/personalCenter/components/CollectionDatabase.jsx'
import BrowsingColumn from '@/views/personalCenter/components/BrowsingColumn.jsx'
import BrowsingAudio from '@/views/personalCenter/components/BrowsingAudio.jsx'
import BrowsingPerson from '@/views/personalCenter/components/BrowsingPerson.jsx'
import BrowsingEssay from '@/views/personalCenter/components/BrowsingEssay.jsx'
import BrowsingNewspaperMagazine from '@/views/personalCenter/components/BrowsingNewspaperMagazine.jsx'
import BrowsingCultural from '@/views/personalCenter/components/BrowsingCultural.jsx'
import BrowsingDatabase from '@/views/personalCenter/components/BrowsingDatabase.jsx'

//活动
const ActiveItemContainer = styled.div`
    width: 280px;
    height: fit-content;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    position: relative;


    .cover {
        width: 280px;
        height: 186px;
        border-radius: 6px 6px 0 0;
        display: block;
    }

    .views {
        position: absolute;
        width: 100%;
        height: 40px;
        padding: 18px 0px 8px 8px;
        background: linear-gradient(360deg, #000 -20.93%, #66666600 85.59%);
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        top: 148px;
        left: 0;
        box-sizing: border-box;

        img {
            width: 16px;
            height: 12px;
            margin-right: 6px;
        }
    }

    .content {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;

        .title-box {
            width: 100%;
            position: relative;
            height: 44px;

            .type {
                position: absolute;
                top: 0;
                left: 0;
                width: 64px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                color: #ffffff;
                font-size: 14px;
                font-weight: 700;
                border-radius: 2px;
                background: #039e40;
            }

            .title {
                box-sizing: content-box;
                line-height: 22px;
                color: #1c1c1c;
                font-size: 16px;
                font-weight: 700;
                text-indent: 68px;
                width: fit-content;
            }
        }

        .type-box {
            display: flex;
            margin-top: 10px;
        }

        .time {
            color: #666666;
            font-size: 12px;
            font-weight: 400;
            line-height: 12px;
            margin-top: 10px;
        }

        .line {
            height: 1px;
            width: 100%;
            background: #D6D6D6;
            margin-top: 16px;
        }

        .press-box {
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .press-cover {
                width: 70px;
                height: 70px;
                border: 1px solid #D6D6D6;
                border-radius: 50%;
                box-sizing: border-box;
            }

            .press-name {
                color: #1c1c1c;
                font-size: 14px;
                font-weight: 700;
                line-height: 22px;
                width: fit-content;
                max-width: 168px;
            }
        }
    }
`

export function ActiveItem({detail}) {
  const colorMap = {
    1: '#f77629',
    2: '#006647',
    3: '#666'
  }
  return (<>
    <ActiveItemContainer className={'hover-box'}>
      <img src={detail?.cover_image} alt="" className={'cover'}/>
      <div className={'views'}>
        <img src={getImageUrl('eyes.png')} alt=""/>
        {detail?.views}
      </div>
      <div className={'content'}>
        <div className={'title-box'}>
          {detail?.reward_type_name && <div className={'type'}>{detail?.reward_type_name}</div>}
          <div className={'title u-line-2 hover-text'}
               style={{textIndent: detail?.reward_type_name ? '64px' : '0px'}}>{detail?.activity_name}</div>
        </div>
        <div className={'type-box'}>
          {detail?.active_status_name && <TypeBox color={colorMap[detail?.active_status]}
                                                  style={{marginRight: '6px'}}>{detail?.active_status_name}</TypeBox>}
          {detail?.category_name && <TypeBox>{detail?.category_name}</TypeBox>}
        </div>
        <div className={'time'}>{detail?.active_time_format}</div>
        <div className={'line'}></div>
        <div className={'press-box'}>
          <img src={detail?.logo_url} alt="" className={'press-cover'}/>
          <div className={'press-name u-line-1'}>{detail?.press_name}</div>
        </div>
      </div>
    </ActiveItemContainer>
  </>)
}


//报刊社
const CulturalCardsItemBox = styled.div`
    width: 386px;
    height: 174px;
    background: linear-gradient(143deg, rgba(${props => props.rgbcolor}, 0.7) 15.01%, ${props => props.color} 53.73%);
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;

    .views {
        position: absolute;
        top: 10px;
        right: 4px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        width: 72px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        .see {
            width: 16px;
            height: 12px;
            margin-right: 6px;
        }
    }

    .mask {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 5;
    }

    .content {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 10;

        .press-box {
            margin-top: 12px;
            margin-left: 12px;
            display: flex;

            .cover {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                display: block;
            }

            .info {
                margin-left: 20px;

                .title {
                    color: #1c1c1c;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 20px;
                    width: fit-content;
                    max-width: 174px;
                    margin-top: 8px;
                    position: relative;

                    &::after {
                        content: '';
                        width: 100%;
                        height: 4px;
                        position: absolute;
                        background: linear-gradient(270deg, #ffffff00 0%, ${props => props.color} 100%);
                        left: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                }

                .slogan {
                    max-width: 256px;
                    width: fit-content;
                    color: #666666;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    margin-top: 10px;
                }
            }
        }

        .statistics {
            width: 366px;
            height: 66px;
            background: #FFF;
            margin: 4px auto 0 auto;
            box-sizing: border-box;
            padding: 10px 28px;
            display: grid;
            grid-template-columns: repeat(3, auto);
            justify-content: space-between;
            gap: 13px 0;

            .statistics-item {
                display: flex;
                align-items: center;
                height: 16px;
                //justify-content: center;

                .icon {
                    font-size: 16px;
                    margin-right: 4px;
                    color: ${props => props.color};
                }

                .number {
                    color: #666666;
                    font-size: 12px;
                    font-weight: 400;
                }
            }
        }
    }

`

export function CulturalCardsItem({detail}) {
  return (<>
    <CulturalCardsItemBox color={detail?.theme_color} rgbcolor={detail?.theme_color_rgb} className={'item hover-box'}>
      <img src={getImageUrl('card_mask.png')} alt="" className={'mask'}/>
      <div className={'views'}>
        <img src={getImageUrl('eyes.png')} alt="" className={'see'}/>
        {detail?.views}
      </div>
      <div className={'content'}>
        <div className={'press-box'}>
          <img src={detail?.logo_url} alt="" className={'cover'}/>
          <div className={'info'}>
            <div className={'title u-line-1 hover-text'}>{detail?.press_name}</div>
            <div className={'slogan u-line-2'}>{detail?.slogan}</div>
          </div>
        </div>
        <div className={'statistics'}>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-activity"></div>
            <div className="number">活动：{detail?.activity_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-article"></div>
            <div className="number">文章：{detail?.article_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-person"></div>
            <div className="number">大咖：{detail?.influential_person_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-newspaper"></div>
            <div className="number">报刊：{detail?.publication_type_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-fans"></div>
            <div className="number">粉丝：{detail?.fans_count}</div>
          </div>
          <div className={'statistics-item'}>
            <div className="icon iconfont icon-goods"></div>
            <div className="number">商品：{detail?.goods_count}</div>
          </div>
        </div>
      </div>
    </CulturalCardsItemBox>
  </>)
}

//人物
const BigCoffeeItemBox = styled.div`
    width: 385px;
    height: 154px;
    border-radius: 6px;
    background: #FFF;

    .inner-box {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        background: #FFF;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        padding: 27px 7px 14px 12px;
        display: flex;

        .left-box {
            width: 99px;
            height: 99px;
            border: 1px dashed #006647;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .right-box {
            display: flex;
            flex-direction: column;

            .title-box {
                display: flex;
                margin-top: 3px;
                align-items: center;

                .title {
                    color: #1c1c1c;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 18px;

                }

                .type-box {
                    display: flex;
                    margin-left: 4px;

                    .type-item {
                        width: 94px;
                        text-align: center;
                        margin-right: 6px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }

            .desc {
                width: fit-content;
                max-width: 251px;
                color: #666666;
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
                //letter-spacing: 0.42px;
                margin-top: 12px;
                height: 36px;
            }

            .nums-box {
                //flex: 1;
                align-items: center;
                display: flex;
                justify-content: space-between;
                margin-top: 18px;


                .nums {
                    width: fit-content;
                    max-width: 132px;
                    padding: 0 10px;
                    height: 18px;
                    border-radius: 2px;
                    background: #C8DECF;
                    color: #1c1c1c;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 18px;
                    box-sizing: border-box;
                }

                .press {
                    width: fit-content;
                    max-width: 121px;
                    height: 22px;
                    box-sizing: border-box;
                    padding: 0 8px;
                    color: #7a4f23;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 22px;
                    border-radius: 2px;
                    background: #FFD7AF;
                }

            }
        }

        .round {
            width: 43px;
            height: 106px;
            //flex-shrink: 0;
            border-radius: 50%;
            background: #358451;
            filter: blur(49.81px);
            position: absolute;
            right: 0px;
            top: -60px;
        }

        .label {
            position: absolute;
            right: 0;
            top: 0;
            width: 96px;
            height: 22px;
            border-radius: 0 6px 0 0;
            background: #00000080;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;

            img {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }
`

export function BigCoffeeItem({detail}) {
  return (<>
    <BigCoffeeItemBox className={'hover-box'}>

      <div className={'inner-box'}>
        <div className={'round'}></div>
        <div className={'label'}>
          <img src={getImageUrl('eyes.png')} alt=""/>
          {detail?.views}
        </div>
        <img src={detail?.cover_image} alt="" className={'left-box'}/>
        <div className={'right-box'}>
          <div className={'title-box'}>
            <div className={'title u-line-1 hover-text'}>{detail?.person_name}</div>
            {detail?.tag?.length > 0 && <div className={'type-box'}>
              {detail?.tag.map((item, index) => <TypeBox className={'type-item'} key={index}>{item}</TypeBox>)}
            </div>}

          </div>
          <div className={'desc u-line-2'}>{detail?.introduction}</div>
          <div className={'nums-box'}>
            <div className={'nums'}>文章数量：{detail?.article_count}篇</div>
            <div className={'press'}>{detail?.press_name}</div>
          </div>

        </div>
      </div>
    </BigCoffeeItemBox>
  </>)
}


//专栏
const ColumnItemBox = styled.div`
    width: 280px;
    height: 383px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    .cover-box{
        width: 280px;
        height: 186px;
        border-radius: 6px 6px 0 0;
        position: relative;
        .cover{
            width: 100%;
            height: 100%;
            border-radius: 6px 6px 0 0;
        }
        .views{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            padding: 18px 0 8px 8px;
            background: linear-gradient(0deg, #000 -11.54%, #9e9e9e00 79.49%);
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
            .see {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }
    .content{
        box-sizing: border-box;
        width: 100%;
        padding: 16px;
        .title{
            max-width: 248px;
            width: fit-content;
            color: #1c1c1c;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.42px;
            line-height: 18px;
        }
        .desc{
            max-width: 248px;
            width: fit-content;
            color: #666666;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            letter-spacing: 0.36px;
            margin-top: 8px;
            margin-bottom: 10px;
        }
        .line {
            height: 1px;
            width: 100%;
            background: #D6D6D6;
            margin-top: 15px;
        }
        .press-box{
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .press-cover{
                width: 60px;
                height: 60px;
                border: 1px solid #D6D6D6;
                box-sizing: border-box;
                border-radius: 50%;
            }
            .press-name{
                max-width: 182px;
                width: fit-content;
                color: #1c1c1c;
                font-size: 14px;
                font-weight: 700;
                line-height: 18px;
            }
        }
    }
`

export function ColumnItem({detail}) {
  const columnType = {
    1: '音频专栏',
    2: '人物专栏',
    3: '文章专栏'
  }
  return (<>
    <ColumnItemBox className={'hover-box'}>
      <div className={'cover-box'}>
        <img src={detail?.cover_image} alt="" className={'cover'}/>
        <div className={'views'}>
          <img src={getImageUrl('eyes.png')} alt="" className={'see'}/>
          {detail?.views}
        </div>
      </div>
      <div className={'content'}>
        <div className={'title u-line-1 hover-text'}>{detail?.column_name}</div>
        <div className={'desc u-line-1'}>{detail?.introduction}</div>
        <TypeBox>{columnType[detail?.column_type]}</TypeBox>
        <div className={'line'}></div>
        <div className={'press-box'}>
          <img src={detail?.logo_url} alt="" className={'press-cover'}/>
          <div className={'press-name'}>{detail?.press_name}</div>
        </div>
      </div>
    </ColumnItemBox>
  </>)
}

// 音频
const AudioItemBox = styled.div`
    width: 220px;
    height: 318px;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
    position: relative;

    .cover-box {
        width: 220px;
        height: 220px;
        border-radius: 6px 6px 0 0;
        position: relative;

        .cover {
            width: 100%;
            height: 100%;
            border-radius: 6px 6px 0 0;
            filter: blur(2px);
        }

        .record {
            width: 188px;
            height: 188px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .record2 {
            position: absolute;
            //width: 32px;
            height: 100px;
            top: 13px;
            left: -7px;
        }

        .cover-mall {
            width: 142px;
            height: 142px;
            box-sizing: border-box;
            border: 3px solid #d9d9d9;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

        }

        .views {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 23px;
            box-sizing: border-box;
            display: flex;
            padding: 4px 8px;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(360deg, #000 -10.06%, #66666600 97.48%);

            .left {
                display: flex;
                align-items: center;
                color: #ffffff;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;

                img {
                    width: 16px;
                    height: 12px;
                    margin-right: 6px;
                }
            }

            .right {
                color: #ffffff;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }

    .title {
        max-width: 196px;
        color: #1c1c1c;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        height: 36px;
        width: fit-content;
        margin-top: 12px;
        margin-left: 12px;
        display: flex;
        align-items: center;
    }

    .line {
        width: 196px;
        height: 1px;
        background: #B0B0B0;
        margin-top: 12px;
        margin-left: 12px;
    }

    .press {
        max-width: 196px;
        width: fit-content;
        color: #006647;
        margin-top: 12px;
        margin-left: 12px;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
    }
`


export function AudioItem({detail}) {
  return (
      <AudioItemBox>
        <div className={'cover-box'}>
          <img src={detail.cover_image} alt="" className={'cover'}/>
          <img src={getImageUrl('specialColumn/round.png')} alt="" className={'record'}/>
          <img src={getImageUrl('specialColumn/yg.png')} alt="" className={'record2'}/>
          <img src={detail?.cover_image} alt="" className={'cover-mall'}/>
          <div className={'views'}>
            <div className={'left'}>
              <img src={getImageUrl('eyes.png')} alt=""/>
              {detail?.views}
            </div>
            <div className={'right'}>{detail?.audio_duration}</div>
          </div>
        </div>
        <div className={'title'}>
          <div className={'u-line-2 hover-text'}>{detail.audio_name}</div>
        </div>

        <div className={'line'}></div>
        <div className={'press u-line-1'}>{detail.press_name}</div>
      </AudioItemBox>
  )
}
// 文章
const EssayItemBox = styled.div`
    width: 1161px;
    height: 178px;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #C8C8C8;
    .left-box{
        position: relative;
        width: 231px;
        height: 154px;
        margin-right: 30px;
        .left-cover {
            width: 100%;
            height: 100%;
        }
        .views{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            padding: 18px 0 8px 8px;
            background: linear-gradient(0deg, #000 -11.54%, #9e9e9e00 79.49%);
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
            .see {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }
    .right-box{
        flex: 1;
        .title{
            max-width: 899px;
            width: fit-content;
            color: #000000;
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;
            margin-top: 12px;
        }
        .desc{
            max-width: 899px;
            width: fit-content;
            height: 36px;
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            margin-top: 20px;
        }
        .press-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            .press-name{
                width: fit-content;
                box-sizing: border-box;
                padding: 0 10px;
                height: 22px;
                line-height: 22px;
                border-radius: 2px;
                background: #FFD7AF;
                color: #7a4f23;
                font-size: 14px;
                font-weight: 400;
            }
            .time{
                color: #666666;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0.42px;
            }
        }
    }

`
export function EssayItem({detail}) {
  return (
      <EssayItemBox>
        <div className={'left-box'}>
          <img src={detail?.cover_image} alt="" className={'left-cover'}/>
          <div className={'views'}>
            <img src={getImageUrl('eyes.png')} alt="" className={'see'}/>
            {detail?.views}
          </div>
        </div>
        <div className={'right-box'}>
          <div className={'title u-line-1 hover-text'}>{detail?.title}</div>
          <div className={'desc u-line-2'}>{detail?.introduction}</div>
          <div className={'press-box'}>
            <div className={'press-name'}>{detail?.press_name}</div>
            <div className={'time'}>{detail?.create_time}</div>
          </div>
        </div>
      </EssayItemBox>
  )
}



//文创周边
const CulturalCreativityItemBox = styled.div`
    width: 289px;
    height: 368px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    padding: 18px;
    .cover{
        width: 253px;
        height: 193px;
        object-fit: contain;
    }
    .title{
        width: fit-content;
        max-width: 253px;
        color: #1c1c1c;
        font-size: 16px;
        font-weight: 700;
        line-height: 18px;
        margin-top: 14px;
    }
    .press-name{
        max-width: 253px;
        width: fit-content;
        height: 22px;
        line-height: 22px;
        box-sizing: border-box;
        padding: 0 10px;
        color: #7a4f23;
        font-size: 14px;
        font-weight: 400;
        border-radius: 2px;
        background: #FFD7AF;
        margin-top: 10px;
    }
    .price-box {
        display: flex;
        align-items: flex-end;
        margin-top: 14px;
        margin-bottom: 23px;
        .new-price {
            margin-right: 10px;
            color: #cd3737;
            font-size: 18px;
            font-weight: 700;
            line-height: 15px;
            letter-spacing: 0.54px;
        }

        .old-price {;
            color: #9e9e9e;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.42px;
            text-decoration: line-through;
            line-height: 10px;
        }
    }
`
export function CulturalCreativityItem({detail}){
  const hasDiscountedPrice = detail?.discounted_price && detail?.discounted_price !== '0.00';
  return (<CulturalCreativityItemBox>
    <img src={detail?.cover_image} alt=""  className={'cover'}/>
    <div className={'title u-line-1'}>{detail?.product_name}</div>
    <div className={'press-name u-line-1'}>{detail?.press_name}</div>
    <div className={'price-box'}>
      {hasDiscountedPrice && <div className={'new-price'}>￥{detail?.discounted_price}</div>}
      <div className={`${hasDiscountedPrice ? 'old-price' : 'new-price'}`}>￥{detail?.price}</div>
    </div>
    <TypeBox>{detail?.category?.category_name}</TypeBox>
  </CulturalCreativityItemBox>)
}


export default function CustomList({leve1, leve2}) {
  switch (true) {
    case leve1 === 1:
      return <ParticipatedActivityList/>
    case leve1 === 2 && leve2 === 1:
      return <AttentionPress/>

    case leve1 === 2 && leve2 === 2:
      return <AttentionPerson/>

    case leve1 === 3 && leve2 === 1:
      return <CollectionActivity/>

    case leve1 === 3 && leve2 === 2:
      return <CollectionColumn/>

    case leve1 === 3 && leve2 === 3:
      return <CollectionAudio/>

    case leve1 === 3 && leve2 === 4:
      return <CollectionEssay/>

    case leve1 === 3 && leve2 === 5:
      return <CollectionNewspaperMagazine/>

    case leve1 === 3 && leve2 === 6:
      return <CollectionCultural/>

    case leve1 === 3 && leve2 === 7:
      return <CollectionDatabase/>

    case leve1 === 3 && leve2 === 8:
      return <div>原创Ip</div>

    case leve1 === 4 && leve2 === 1:
      return <BrowsingActivity/>

    case leve1 === 4 && leve2 === 2:
      return <BrowsingColumn/>

    case leve1 === 4 && leve2 === 3:
      return <BrowsingAudio/>

    case leve1 === 4 && leve2 === 4:
      return <BrowsingPerson/>

    case leve1 === 4 && leve2 === 5:
      return <BrowsingEssay/>

    case leve1 === 4 && leve2 === 6:
      return <BrowsingNewspaperMagazine/>

    case leve1 === 4 && leve2 === 7:
      return <BrowsingCultural/>

    case leve1 === 4 && leve2 === 8:
      return <BrowsingDatabase/>

    case leve1 === 4 && leve2 === 9:
      return <div>原创Ip</div>
  }
  // if(leve1===1){
  //   return ParticipatedActivityList
  // }
}